<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>html5猩球大战</title>
<style>
body{
	margin: 0;
}
.window{
}
.window, .canvas {
	margin: 0 auto;
}
.window .canvas {
	background: url("images/bg.png");
	/*background-size: 100% 100%;*/
}
.mask{
	background: url("images/Start.png") repeat scroll 0% 0% transparent; 
	width: 640px; 
	height: 100%; 
	position: absolute; 
	top: 0px;
	z-index: 9999;
	background-size: 100% 100%;
}
.start{
	background: url("images/Start_btn.png") repeat scroll 0% 0% transparent; 
	width: 218px;
	height: 83px; 
	border:0;
	padding:0;
	margin-top: 350px;
	margin-left: 180px;
	cursor:pointer;
}
.gunselect{
	padding-left: 0px; 
	position: absolute; 
	top: 800px; 
	left: 400px;
}
.gunselect input{
	border:0;
	margin:0;
}
.gunselect .up{
	background: url("images/UI.png") repeat scroll -324px -148px transparent; 
	width: 63px;
	height: 35px; 
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.gunselect .gun{
	background: url("images/UI.png") repeat scroll -169px -32px transparent; 
	width: 221px;
	height: 83px; 
}
.gunselect .down{
	background: url("images/UI.png") repeat scroll -324px -148px transparent; 
	width: 63px;
	height: 35px; 
	-webkit-transform: rotate(180deg) scale(1);
	-moz-transform: rotate(180deg) scale(1);
	-o-transform: rotate(180deg) scale(1);
	transform: rotate(180deg) scale(1);
}
.gunselect .up,.gunselect .down{
	margin-left: 80px;
}
</style>
<!--玩家-->
<script src="scripts/player.js"></script>
<!--敌人-->
<script src="scripts/enemies.js"></script>
<!--子弹-->
<script src="scripts/bullets.js"></script>
<!--准星-->
<script src="scripts/post.js"></script>
<!--分数-->
<script src="scripts/score.js"></script>
<script>
	var canvas;
	var context;
	var player;//玩家
	var enemies;//敌人们
	var bullets;//子弹们
	var post;//准星
	var score;
	//timeline
	var timer;
	const FPS = 30;
	const SECONDS_BETWEEN_FRAMES = 1 / FPS * 1000 * 1.5;

	function init() {
		canvas = document.getElementById("canvas");
		context = canvas.getContext("2d");

		context.clearRect(0, 0, canvas.width, canvas.height);
		enemies = new Enemies(canvas, context);
		player = new Player(canvas, context);
		bullets = new Bullets(canvas, context);
		post = new Post(canvas, context);
		score = new Score(canvas, context);
		timer = setInterval(animation, SECONDS_BETWEEN_FRAMES);

		canvas.onmousedown = startShoot;
		canvas.onmouseup = stopShoot;
		canvas.onmousemove = aiming;
		canvas.onmouseleave = stopShoot;
		canvas.onmouseout = stopShoot;
	}

	//瞄准中
	function aiming(event) {
		post.play(getPositionInEvent(event));
	}

	//开始射击
	function startShoot(event) {
		bullets.run(getPositionInEvent(event));
		enemies.getBullet(bullets);
		player.changeStatus(1);
		post.changeStatus(1);
		post.play(getPositionInEvent(event));
	}

	//停止射击
	function stopShoot() {
		player.changeStatus(0);
		post.changeStatus(0);
	}

	//在事件对象中取出定位信息
	function getPositionInEvent(event) {
		var pos = {};
		event.preventDefault();
		pos.x = event.clientX;
		pos.y = event.clientY + 130;
		return pos;
	}

	//动画主线
	function animation() {
		context.clearRect(0, 0, canvas.width, canvas.height);
		player.play();
		enemies.play();
		bullets.play();
		score.play();
		changeScore();
	}
	
	//改变积分
	function changeScore(){
		var resArr = enemies.getScoreInfo();
		switch(resArr[1]){
			case 5:
				score.changeStatus(0);
				break;
			case 10:
				score.changeStatus(1);
				break;
			case 15:
				score.changeStatus(2);
				break;
			case 20:
				score.changeStatus(3);
				break;
			case 25:
				score.changeStatus(4);
				break;
			case 30:
				score.changeStatus(5);
				break;
			case 35:
				//GAME OVER 并且清零
				enemies.init();
				enemies.initScore();
				score.changeStatus(0);
				break;
		}
	}
	
	function start(event){
		init();
		document.getElementById("startBtn").style.display = "none";
	}
	
	function selectGun(value){
		switch(value){
			case "up":
				selectUp();
				break;
			case "gun":
				selectUp();
				break;
			case "down":
				selectDown();
				break;
		}
	}
	
	function selectUp(){
		console.log("UP");
	}
	
	function selectDown(){
		console.log("DOWN");
	}
	
	function changeBig(event){
		var dom = event.target;
	}
	
	function changeSmall(event){
		var dom = event.target;
	}
</script>
</head>
<body>

	<div class="window">
		<canvas class="canvas" id="canvas"  width="640" height="1140">
			您的浏览器不支持HTML5！
		</canvas>
		<div class="mask" id="startBtn">
			<input type="button" class="start" onClick="start(event)"/>
		</div>
		<div class="gunselect">
			<input type="button" class="up" onClick="selectGun('up')" onMouseOver="changeBig(event)" onMouseOut="changeSmall(event)"><br/>
			<input type="button" class="gun" onClick="selectGun('gun')"><br/>
			<input type="button" class="down" onClick="selectGun('down')" onMouseOver="changeBig(event)" onMouseOut="changeSmall(event)"><br/>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	function bodyScale(){
var devicewidth=document.documentElement.clientWidth;
	var scale=devicewidth/640;
	document.body.style.zoom=scale;
}
window.onload=window.onresize=function(){
	bodyScale();
}
</script>
</html>